<template>
  <div
    class="custom-container"
    :style="{ background: '#fff', padding: '24px', margin: 0 }"
  >
  
    <a-input-search 
      class="search"
      placeholder="输入关键词搜索"
      @search="search"
      v-model="keyword"
      enterButton
    />
  

    <!-- <a-icon type="cloud-server" class="all-data" @click="exportData" /> -->
      <a-icon type="file-excel" theme="twoTone" two-tone-color="#52c41a" class="all-data" @click="exportData()" />
    <a-table
      style=" margin: 24px 0"
      :columns="columns"
      :dataSource="userList"
      :pagination="pagination"
      :loading="loading"
    >
      <template slot="healthStatus" slot-scope="text, item">
        <!-- <div v-if="item.status || item.status == 0">
          <a-tag :color="statusList[item.status].color">
            {{ statusList[item.status].text }}</a-tag
          >
        </div> -->
          <a-switch 
          checked-children="是"
          :default-checked="item.status==2"
          @click="changeHealth($event, item.id)"
          un-checked-children="否"
        />
      </template>
      <template slot="certification" slot-scope="text, item">
        <div v-if="item.certification == 0">
          
          <a-tag color="#87d068">未认证</a-tag>
        </div>
        <div v-if="item.certification == 1">
          <a-icon type="check-circle" theme="twoTone" style=" font-size: 20px; margin-left:17px;"/>
        </div>
      </template>
          <template slot="locked" slot-scope="text, item">
        <div v-if="item.locked == 0">
          <a-tag color="blue" style="margin-left:-5px;">未锁定</a-tag>
        </div>
        <div v-if="item.locked == 1">
          <a-tag color="red" style="margin-left:-5px;">已锁定</a-tag>
        </div>
      </template>
      <template slot="isCertification" slot-scope="text, item">
        <a-switch
          checked-children="通过"
          @click="vaild($event, item.id)"
          un-checked-children="不通过"
        />
      </template>
      <a slot="action" slot-scope="text, item">
        <a-icon type="eye" style=" font-size: 18px; margin-left:-5px;" @click="detail(item)"/>  
          <!-- 详情
    
          更新是否确诊
        -->
        <a-icon type="lock"  theme="twoTone" two-tone-color="#eb2f96" 
        style=" font-size: 18px; margin-left:5px;" @click="logout(item.id)"
        v-if="item.locked == 0 && item.certification == 1"/>
        <!--
          锁定
    -->

        <a-icon type="unlock"  theme="twoTone" two-tone-color="#52c41a" 
        style=" font-size: 18px; margin-left:5px;"
        @click="logout(item.id)"
        v-if="item.locked == 1 && item.certification == 1"/>

          <!-- <a-button
          style="background-color:#87d068;color:white"
          @click="logout(item.id)"
          v-if="item.locked == 1 && item.certification == 1"
          size="small"
        >
          解除锁定
        </a-button> -->
      </a>
    </a-table>
    <a-modal
      v-model="visible"
      title="住户信息认证"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
    >
    </a-modal>
  </div>
</template>

<script>

let columns = [
  {
    title: '昵称',
    dataIndex: 'username',
    
  },
  {
    title: '真实姓名',
    dataIndex: 'realName',
    width: 100
  },
  {
    title: '身份证',
    dataIndex: 'idCard',
    ellipsis: true
  },
  {
    title: '手机号',
    dataIndex: 'phone'
  },
  {
    title: '地址',
    dataIndex: 'address',
    ellipsis: true
  },
  {
    title: '是否确诊',
    scopedSlots: { customRender: 'healthStatus' }
    // dataIndex: "status"
  },
  {
    title: '认证状态',
    scopedSlots: { customRender: 'certification' }
    // dataIndex: "certification"
  },
  {
    title: '是否认证',
    scopedSlots: { customRender: 'isCertification' }
    // dataIndex: "certification"
  },
  {
    title: '状态',
    scopedSlots: { customRender: 'locked' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
];

export default {
  data () {
    return {
      visible: false,
      columns,
      page: 0,
      size: 10,
      pagination: {},
      userList: [],
      loading: false,
      keyword: '',
      personType: '1',
      statusList: [
        {
          color: '#108ee9',
          text: '正常'
        },
        {
          color: '#87d068',
          text: '异常'
        },
        {
          color: '#f50',
          text: '确诊'
        }
      ]
    };
  },
  created () {
    this.load();
  },
  methods: {
    selectChange (val) {
      this.$data.personType = val;
      this.load();
    },
    handleChange () {},
    exportData () {
      let token = localStorage.getItem('ktoken');
      fetch(
        'https://dudu.gaoxiao.love/healthqrcode/website/website/household/export?personType=' +
          this.$data.personType,
        {
          method: 'GET',
          headers: new Headers({
            Authorization: token
          })
        }
      )
        .then(res => res.blob())
        .then(data => {
          const blobUrl = window.URL.createObjectURL(data);
          const a = document.createElement('a');
          a.download = '住户列表' + '.xlsx';
          a.href = blobUrl;
          a.click();
          setShareVisible(false);
        });
    },
    hideModal () {},
    changeHealth (val, id) {
      let that = this;
      let parma = {
        id: id
      }
      that.$axios.updateConfirmedStatus(parma).then(res => {
        if (res.resultCode === 0) {
          this.$message.success('更改成功！')
          this.load();
        } else {
          this.$message.error('更改失败！')
        }
      });
    },
    vaild (val, id) {
      let pass = val ? 1 : 0;
      let parma = {
        pass: pass,
        id: id
      };
      this.$axios.userVerify(parma).then(res => {
        if (res.resultCode == 0) {
          this.load();
        }
      });
    },
    logout (id) {
      let that = this;
      that.$confirm({
        title: '提示',
        content: '确认更改该住户锁定状态？',
        cancelText: '取消',
        okText: '确定',
        onOk () {
          let parma = {
            id: id
          }
          that.$axios.logout(parma).then(res => {
            if (res.resultCode == 0) {
              that.$message.success('锁定状态更新成功！')
              that.load();
            } else {
              that.$message.error('锁定状态更新失败！')
            }
          });
        },
        onCancel () {}
      });
    },
    load () {
      this.$data.loading = true;
      const page = this.$data.page;
      const size = this.$data.size;
      let parma = {
        pageNumber: page,
        pageSize: size,
        keyword: this.$data.keyword,
        personType: this.$data.personType
      };
      this.$axios.residentList(parma).then(res => {
        if (res.resultCode == 0) {
          const data = res.data;
          let flag = 1;
          if (this.$data.personType == '1') {
            for (var index in columns) {
              if (columns[index].title == '是否认证') {
                columns.splice(index, 1);
              }
              if (columns[index].title == '是否确诊') {
                flag = 0;
              }
            }
            if (flag) {
              columns.splice(5, 0, {
                title: '是否确诊',
                scopedSlots: { customRender: 'healthStatus' }
              });
            }
          } else {
            for (var index in columns) {
              if (columns[index].title == '是否确诊') {
                columns.splice(index, 1);
              }
              if (columns[index].title == '是否认证') {
                flag = 0;
              }
            }
            if (flag) {
              columns.splice(6, 0, {
                title: '是否认证',
                scopedSlots: { customRender: 'isCertification' }
                // dataIndex: "certification"
              });
            }
          }
          const pagination = {
            total: data.totalElements,
            onChange: this.pageChange
          };
          this.$data.pagination = pagination;
          this.$data.userList = data.content;
        } else {
          this.$message.error('获取数据失败', 1.5);
        }

        this.$data.loading = false;
      });
    },
    pageChange (page, pageSize) {
      this.$data.page = page - 1;
      this.$data.size = pageSize;
      this.load();
    },

    search () {
      this.$data.page = 0;
      this.load();
    },
    detail (item) {
      let id = item.id;
      if (item.certification == 0) {
        this.$message.warning('该住户尚未填写健康认证表');
        return false;
      }
      this.$router.push({
        name: 'UserInforDetail',
        params: {
          id
        }
      });
    },
    goOut (id) {
      this.$router.push({
        name: 'UserCheckList',
        params: {
          id
        }
      });
    }
  }
};
</script>

<style>
.search {
  position: relative;
  top: 1px;
  margin-left: 8px;
  width: 300px !important;
}
.all-data {
  float: right;
  font-size: 27px;
  margin-right: 20px;
}
.all-select {
  width: 240px;
  margin-right: 50px;
}
</style>
